<template>
	<view class="page page-fill">
		<view class="pending-wapper">
			<!-- <image :src="tempface" mode="scaleToFill" id="face" class="pedding-face" @click="clk"></image> -->
			<avatar selWidth="200px" selHeight="400upx" @upload="myUpload" :avatarSrc="tempface" class="pedding-face">
			</avatar>
		</view>

		<view class="notice">
			<view class="notice-words">
				*请从相册中选择等比宽高的图片噢~
			</view>
		</view>

		<view class="footer-opertor">
			<view class="opertor-words" @click="changePeddingFace">
				重新选择
			</view>
			<view class="opertor-words" @click="upload">
				确认上传
			</view>
		</view>
	</view>
</template>

<script>
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	export default {
		data() {
			return {
				tempface: '' //上传路径
			}
		},
		onLoad(params) {
			var tempFilePaths = params.tempFilePaths;
			this.tempface = tempFilePaths;
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#000000",
			})

		},
		methods: {
			myUpload(rsp) {
                this.tempface = rsp.path; //更新头像方式一
                //rsp.avatar.imgSrc = rsp.path; //更新头像方式二
            },

			// 重新选择图片
			changePeddingFace() {
				var me = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success(res) {
						// 图片的本地文件路径列表,获得临时路径
						var tempFilePaths = res.tempFilePaths[0];
						me.tempface = tempFilePaths;
					}
				})
			},
			upload() {
				var me = this;
				var globalUser = me.getGlobalUser("globalUser");
				uni.showLoading({
					mask: true,
					title: '上传中，请稍后...'
				})
				//上传文件
				uni.uploadFile({
					url: 'https://www.imovietrailer.com/superhero/user/uploadFace?userId=' + globalUser.id + '&qq=lee57837906',
					filePath: me.tempface,
					name: 'file',
					header: {
						"headerUserId": globalUser.id,
						"headerUserToken": globalUser.userUniqueToken
					},
					success(res) {
						console.log(res);

					},
					complete() {
						uni.hideLoading();
					}
				})
			}
		},
		components: {
			avatar
		}
	}
</script>

<style>
	/* 页面铺满屏幕 */
	.page-fill {
		background-color: #000000;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
	}

	.pending-wapper {}

	.pedding-face {
		width: 277.778px;
		height: 375px;


	}

	.notice {}

	.notice-words {}

	.footer-opertor {
		position: fixed;
		bottom: 0;
		border-top: #515050 solid 1px;
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding: 15px;
	}

	.opertor-words {
		color: #e8e5e5;
		font-size: 16px;
		width: 100px;
	}
</style>
